<template>
	<el-row class="register-container" :gutter="20">
		<el-col class="register-left" :style="{background:'url('+regBg+') no-repeat'}" :span="10">
			<div class="register-left-content"></div>
		</el-col>
		<el-col class="register-main" :span="14">
			<div class="register-main-header">
				<h4>智联农业管理平台</h4>
				
			</div>


			<el-form 
				ref="registerForm"
				:rules="registerRules"
				:model="registerForm"
				class="register-form"
			>

				<el-form-item>
					<el-divider class="register-divider">一键注册</el-divider>
				</el-form-item>

				<el-form-item label="用户名" prop="account">
					<el-input
						v-model="registerForm.account"
						auto-complete="off"
						placeholder="请输入用户名"
					></el-input>
				</el-form-item>

				<el-form-item label="设置密码" prop="password">
					<el-input
						v-model="registerForm.password"
						:type="passwordType"
						auto-complete="off"
						placeholder="请输入密码"
					></el-input>
				</el-form-item>


				<el-form-item label="确认密码" prop="conPassword">
					<el-input
						v-model="registerForm.conPassword"
						:type="passwordType"
						auto-complete="off"
						placeholder="请再次输入密码"
					></el-input>
				</el-form-item>

				<el-form-item label="手机号码" prop="phone">
					<el-input
						v-model="registerForm.phone"
						auto-complete="off"
						placeholder="请输入手机号码"
					>
						<template slot="suffix">
          					<span @click="handleSend"
                				class="msg-text"
                				:class="[{display:msgKey}]">{{msgText}}</span>
       					 </template>

					</el-input>
				</el-form-item>

				<el-form-item label="短信验证码" prop="smsCode">
					<el-input
						v-model="registerForm.smsCode"
						auto-complete="off"
						placeholder="请输入短信验证码"
					></el-input>
				</el-form-item>

				

				<el-form-item>
					<el-button class="register-btn" type="primary" @click="handleRegister">注&nbsp;册</el-button>
				</el-form-item>
			</el-form>

		</el-col>
	</el-row>
</template>


<script>
import { getMsgCode, register, loginByUsername } from '@/api/user'

export default{
	data(){
		return{
			regBg:require('@/assets/reg.jpg'),
			registerForm:{
				account:"",
				phone:"",
				smsCode:"",
				password:"",
				conPassword:"",
			},
			registerRules:{
				account:[{ required: true, message: "请输入账号", trigger: "blur" }],
				conPassword: [
      				{ required: true, message: "请输入密码", trigger: "blur" },
      				{ min: 6, message: "密码长度最少为6位", trigger: "blur" }
    			],
    			password: [
      				{ required: true, message: "请确认密码", trigger: "blur" },
      				{ min: 6, message: "密码长度最少为6位", trigger: "blur" }
    			],
    			phone:[{ required: true, message: "请输入手机号码", trigger: "blur" }],
    			smsCode:[{ required: true, message: "请输入短信验证码", trigger: "blur" }],
			},
			passwordType: "password",
			redirect: undefined,
			loading: false,
			msgText: "",
			msgTime: "",
      		msgKey: false,
		}
	},
	created() {
    	this.msgText = this.config.MSGINIT;
    	this.msgTime = this.config.MSGTIME;
  	},
	computed:{
		config() {
      		return {
        		MSGINIT: '发送验证码',
        		MSGSCUCCESS: '秒后重发',
        		MSGTIME: 60
      		};
    	}
	},
	methods:{
		//获取短信验证码
		handleSend(){
			if(this.msgKey) return;

			//验证手机号是否通过
			this.$refs.registerForm.validateField('phone',(errMsg)=>{
				if(errMsg){
					return false;
				}

				//发送短信
				getMsgCode(this.registerForm.phone).then((res)=>{
					console.log("------获取短信验证码-------")
					console.log(res)

					if(res.data.code == 200 && res.data.success == true){

						this.$ipcTips.success('发送验证码成功')

						this.msgText = this.msgTime + this.config.MSGSCUCCESS;
						this.msgKey = true;

						const time = setInterval(()=>{
							this.msgTime --;
							this.msgText = this.msgTime + this.config.MSGSCUCCESS;
							if(this.msgTime == 0){
								this.msgTime = this.config.MSGTIME;
						        this.msgText = this.config.MSGINIT;
						        this.msgKey = false;
						        clearInterval(time);
							}

						},1000);

					}else{
						this.$ipcTips.success(res.data.message)
					}	
				})
	
			})

		},
		handleRegister(){
			this.$refs.registerForm.validate(valid => {
				if (valid) {
					this.loading = true
					register(this.registerForm).then((res)=>{
						console.log("------注册返回信息------")
						console.log(res)
						this.loading = false;
						if(res.data.code == 200 && res.data.success == true){
							var loginForm = {
								username:this.registerForm.account,
								password:this.registerForm.password
							};

							this.$store.dispatch('user/loginByUsername', loginForm).then(() => {

            					console.log("-------登录成功后返回-------")
            					this.$router.push({ path: this.redirect || '/' })
            				
          					})
						}else{
							this.$ipcTips.error(res.data.message)
						}
					})
				}else{
					return false
				}
			})
		}
	}
}


</script>

<style>
	.register-divider .el-divider__text{
		color: #aeaeae;
	}

	.register-form .el-input input{
		background-color: #f5f8fa;
    	color: #33475b;
	}

	.register-form .el-form-item .el-input input:focus {
	    border-color: rgba(255,129,0,.5);
	    box-shadow: 0 0 4px 1px rgba(255,129,0,.3), 0 0 0 1px #ff8100;
	    outline: 0;
	}

	.register-form .el-form-item.is-error .el-input input:focus {
	    border-color: rgba(245,108,108,.5);
	    box-shadow: 0 0 4px 1px rgba(245,108,108,.3), 0 0 0 1px #F56C6C;
	    outline: 0;
	}
</style>

<style scoped>
	.register-container{
		height: 100%;
		margin-left: 0!important;
		margin-right: 0!important;
		overflow: auto;
	}

	.register-left{
		height: 100%;
		overflow: auto;
		background-size: cover!important;
    	background-position: center!important;
		/*background-image: linear-gradient(to top, #FA742B, #FFE985);*/
		/*background-image: url('~@src/reg.jpg') no-repeat center;*/
	}
	.register-main{
		height: 100%;
		overflow: auto;
	}

	.register-left-content{
		display: flex;
		height: 100%;
	    align-items: center;
	    flex: 1 1 0%;
	    flex-flow: column nowrap;
	    padding: 85px 50px 50px
	}

	.register-main-header{
		text-align: center;
	}

	.register-main-header h4{
		font-size: 20px;
		color: #33475b;
		margin: 15px 0;
	}
	.register-main-header>p{
		color: #33475b;
	}

	.register-form{
		max-width: 440px;
		margin: auto;
	}

	

	.register-btn{
		width: 100%;
	}

	.msg-text {
  		display: block;
  		width: 80px;
  		border-left: 1px solid #ddd;
  		font-size: 12px;
  		text-align: center;
  		cursor: pointer;
	}
	.msg-text.display {
  		color: #ccc;
	}
</style>